<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />

    <title>Partytown Facebook Pixel</title>

    <script>
      partytown = {
        resolveUrl(url, location) {
          if (url.hostname.includes('connect.facebook.net')) {
            const proxyUrl = new URL('https://cdn.builder.io/api/v1/proxy-api');
            proxyUrl.searchParams.append('url', url);
            return proxyUrl;
          }
        },
        forward: ['fbq'],
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logImageRequests: true,
        logMainAccess: true,
        logSendBeaconRequests: true,
        logStackTraces: false,
        logScriptExecution: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>

    <!-- Facebook Pixel Code -->
    <script type="text/partytown">
      !(function (f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function () {
          n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = '2.0';
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '166730740625110');
      fbq('track', 'PageView');
    </script>
    <!-- End Facebook Pixel Code -->

    <link
      rel="icon"
      id="favicon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <h1>Partytown Facebook Pixel</h1>

    <p>
      <strong>fbq()</strong>
      <span id="testFbq"></span>
    </p>

    <script>
      function sendEvent() {
        fbq('track', 'PageView');
        document.getElementById('testFbq').textContent = 'called';
      }
    </script>
    <button onclick="sendEvent()" id="buttonSendEvent">fbq('track', 'PageView')</button>

    <script type="text/partytown">
      (function () {
        document.body.classList.add('completed');
      })();
    </script>

    <p><a href="/tests/integrations/facebook-pixel/standard.html">Standard Facebook Pixel</a></p>
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
